<template>
	<div>
		<van-nav-bar
		  title="商品分类"
		  left-text="返回"
		  right-text="按钮"
		  left-arrow
		  @click-left="onClickLeft()"
		  @click-right="onClickRight()"
		/>
		<van-row>
			<van-col span="6">
			<div style="background-color: ghostwhite;">
				<van-sidebar v-model="activeKey">
				  <van-sidebar-item @click="one()" title="猜你需要" />
				  <van-sidebar-item @click="two()" title="医疗器材" />
				  <van-sidebar-item @click="three()" title="中西药品" />
				  <van-sidebar-item @click="four()" title="美妆个护" />
				  <van-sidebar-item @click="five()" title="传统滋补" />
				</van-sidebar>
			</div>
		</van-col>
		<van-col span="18">
			<div v-for="g in goods" :key="g">
				<van-swipe-cell>
				  <van-card
				    :price="g.price"
				    :desc="g.descs"
				    :title="g.title"
				    :thumb="g.thumb"
				  />
				  <template #right>
				    <van-button square text="加购" @click="shopcat(g)" type="danger" class="delete-button" />
				  </template>
				</van-swipe-cell>
			</div>
			<div v-if="goods==null">
				<van-empty
				  class="custom-image"
				  image="https://img.yzcdn.cn/vant/custom-empty-image.png"
				  description="空数据"
				/>
			</div>
		</van-col>
		</van-row>
	</div>
	<div style="margin-bottom: 0px;">
				<van-sticky>
					<van-tabbar v-model="active" route>
					  <van-tabbar-item replace to="/main" icon="home-o">首页</van-tabbar-item>
					  <van-tabbar-item replace to="/goodsort" icon="search">分类</van-tabbar-item>
					  <van-tabbar-item replace to="/shopcat" icon="friends-o">购物车</van-tabbar-item>
					  <van-tabbar-item replace to="/goods"  icon="manager-o">订单</van-tabbar-item>
					</van-tabbar>
				</van-sticky>
	</div>
</template>

<script>
	export default {
	  data() {
	    return {
		  type:"",
	      activeKey: 0,
		  goods:[
			 
		  ],
		  good:{
		  	price:"",
		  	descs:"",
		  	thumb:""
		  }
	    }
	  },
	  mounted() {
	  	this.one()
	  },
	  methods:{
		  onClickLeft() {
			this.$router.push("/main") 
		  },
		  one(){
				this.goods=[
					{
						price:"888",
						desc:"的克拉",
						title:"精神绝伦",
						thumb:"http://xphdata.oss-cn-beijing.aliyuncs.com/d7a242496d2c46b68ab24c7596fbdadc_fufanganfenwan.png?Expires=1666789153&OSSAccessKeyId=LTAI5t8QA19CRR2V15oHyHW8&Signature=oZbOOqHUB9GyKol48ZsYQRgVgMw%3D"
					}
				]
		  },
		  two(){
			  this.type='1',
			  // this.axios.get("auth/checkphone?phone="+this.user.phone)
			  this.axios.get("http://localhost:9999/api/oss/goodssort?type="+this.type).then((res)=>{
			  	this.goods=res.data.data;
			  })
		  },
		  three(){
			  this.type='2',
			  // this.axios.get("auth/checkphone?phone="+this.user.phone)
			  this.axios.get("http://localhost:9999/api/oss/goodssort?type="+this.type).then((res)=>{
			  	this.goods=res.data.data;
			  })
		  },
		  four(){
			  this.type='3',
			  // this.axios.get("auth/checkphone?phone="+this.user.phone)
			  this.axios.get("http://localhost:9999/api/oss/goodssort?type="+this.type).then((res)=>{
			  	this.goods=res.data.data;
			  })
		  },
		  five(){
			  this.type='4',
			  // this.axios.get("auth/checkphone?phone="+this.user.phone)
			  this.axios.get("http://localhost:9999/api/oss/goodssort?type="+this.type).then((res)=>{
			  	this.goods=res.data.data;
			  })
		  },
		  shopcat(gg){
		  	this.good.price=gg.price
		  	this.good.thumb=gg.thumb
		  	this.good.descs=gg.title
		  	this.axios.post("http://localhost:9999/api/oss/shopcat",this.good).then((res)=>{
		  		alert(res.data.msg)
		  	})
		  }
	  }
	};
</script>

<style>
</style>
